<!--
*@Author: QWP
*@Description: 
*@Date: 2024-07-09 19:18:01
-->
<template>
  <!-- collapsible -->
  <Layout.Sider theme="light"
    v-model:collapsed="collapsed"
    class="u-custome-sider"
    style="border-right: 1px solid #D9D9D9;">
    <MenuFoldOutlined :rotate="collapsed == true ? 180 : 0"
      class="u-collapsed-icon"
      v-if="canExpand"
      @click="collapsed = !collapsed"/>
    <template v-if="!collapsed">
      <slot></slot>
    </template>
  </Layout.Sider>
</template>

<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue' 
import { useRoute, useRouter } from 'vue-router'
import { Layout } from "ant-design-vue";
defineOptions({
  name: 'u-collapsed-sider'
})

interface Props {
  canExpand?: boolean
}
withDefaults(defineProps<Props>(), {
  canExpand: true
})

const collapsed = ref<boolean>(false)
const collapsed1 = ref<boolean>(true)

</script>

<style lang='scss'>
.u-collapsed-icon {
  position: absolute;
  right: 0;
  font-size: 20px;
  color: #aaa;
  z-index: 20;
}
.u-custome-sider.ant-layout-sider-collapsed {
  flex: 0 0 40px !important;
  max-width: 40px !important;
  min-width: 40px !important;
  width: 40px !important;
  .u-collapsed-icon {
    left: 50%;
    transform: translateX(-50%);
  }
}
</style>